<template>
	<div class="edit-group-rules" v-if="editWorkRules">
		<el-dialog title="派工规则" :visible.sync="editWorkRules" width="70%" :before-close="cancelEditWorkRules">
			<el-form :model="editData" ref="editWorkRules" label-width="100px">
				<el-form-item label="派工规则" :rules="editData.groupWorkRules" prop="defaultPolicy">
					<el-radio-group v-model="editData.defaultPolicy" :disabled="showDetail">
						<el-radio :label="item.id" v-for="item in defaultPolicy" :key="item.id">{{ item.name }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-for="(item, index) in editData.customizedPolicy" :key="index" class="rules">
					<el-input v-model="item.name" :disabled="showDetail" placeholder="规则名称"></el-input>
					<el-select v-model="item.attribute" :disabled="showDetail" placeholder="请选择规则属性">
						<el-option :label="rules" :value="rules" v-for="(rules, index) in editData.rulesProp" :key="index"></el-option>
					</el-select>
					<el-select v-model="item.rules" placeholder="请选择规则顺序" :disabled="item.attribute ? showDetail : item.attribute == ''">
						<el-option :label="option.value" :value="option.id" v-for="option in policyRules" :key="option.id"></el-option>
					</el-select>
					<el-input
						type="text"
						placeholder="点击选择属性并排序"
						v-show="item.rules === 'customized'"
						readonly="readonly"
						class="selectproperty"
						v-model="item.customizedRules"
						@dblclick.native="selectProperty(item.attribute, index)"
						:disabled="showDetail"
					/>
					<i class="el-icon-close" @click="removeEditRules(index)" v-if="!showDetail"></i>
					<!-- 自定义属性对话框 -->
					<el-dialog title="自定义排序" :visible.sync="setCustomRule" :before-close="cancelEditCustomProp" append-to-body>
						<el-input v-model="defaultValue" readonly placeholder="自定义顺序"></el-input>
						<div class="check-box" style="padding-top: 10px;">
							<label for="">可选值</label>
							<el-checkbox-group v-model="chooseCustomProp" @change="changeProp()">
								<el-checkbox v-for="(prop, index) in setCustomProps" :label="prop" :key="index">{{ prop }}</el-checkbox>
							</el-checkbox-group>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button type="primary" @click="cancelEditCustomProp">确 定</el-button>
						</span>
					</el-dialog>
				</el-form-item>
				<el-form-item>
					<el-button @click="addEditWorkRules" v-if="!showDetail">自定义派工规则</el-button>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer" v-if="!showDetail">
				<el-button @click="cancelEditWorkRules">取 消</el-button>
				<el-button type="primary" @click="getEditWorkRules">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getAttributeValues } from '../../api/api';

export default {
	props: {
		editWorkRules: {
			type: Boolean,
			default: () => false
		},
		editWorkRulesData: {
			type: Object,
			default: () => {}
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		return {
			defaultValue: '',
			setCustomRule: false,
			editData: this.editWorkRulesData,
			setCustomProps: '',
			chooseCustomProp: [],
			defaultPolicy: [
				{ id: 'least-used', name: '闲时最长' },
				{ id: 'last-used', name: '最近使用' },
				{ id: 'idlest', name: '最早使用' },
				{ id: 'random', name: '随机' },
				{ id: 'round-robin', name: '循环指派' }
			],
			policyRules: [
				{ id: 'asc', value: '正序' },
				{ id: 'desc', value: '倒序' },
				{ id: 'customized', value: '自定义排序' }
			],
			currentIndex: ''
		};
	},
	watch: {
		chooseCustomProp() {
			this.defaultValue = this.chooseCustomProp.join();
		}
	},
	methods: {
		cancelEditWorkRules() {
			this.$refs['editWorkRules'].resetFields();
			this.$emit('cancelEditWorkRules');
		},
		addEditWorkRules() {
			this.$emit('addEditWorkRules');
		},
		getEditWorkRules() {
			let customizedPolicyData = [];
			if (this.editData.customizedPolicy.length > 0) {
				for (let index = 0; index < this.editData.customizedPolicy.length; index++) {
					let policy = this.editData.customizedPolicy[index];
					if (!policy.name || !policy.attribute || !policy.rules) {
						this.$message.error('请填写完整信息');
						return;
					}
					if (policy.rules === 'customized' && !policy.customizedRules) {
						this.$message.error('请填写完整信息');
						return;
					}

					let item = { name: policy.name, weight: policy.weight, attribute: policy.attribute, rules: policy.rules };
					if (policy.rules === 'customized') {
						item.rules = policy.customizedRules.split(',');
					}
					customizedPolicyData.push(item);
				}
			} else {
				customizedPolicyData = this.editData.customizedPolicy;
			}
			this.editData.customizedPolicy = customizedPolicyData;
			this.$refs['editWorkRules'].validate(valid => {
				if (valid) {
					this.$emit('getEditWorkRules', this.editData);
				} else {
					return false;
				}
			});
		},
		cancelEditCustomProp() {
			this.setCustomRule = false;
			this.chooseCustomProp = [];
			this.$emit('cancelEditCustomProp', this.defaultValue, this.currentIndex);
		},
		removeEditRules(index) {
			this.$emit('removeEditRules', index);
		},
		selectProperty(value, index) {
			if (!value) {
				this.$message.info('您还未选择规则和属性');
				return;
			}
			getAttributeValues(value).then(res => {
				if (res.status === 200) {
					this.setCustomProps = res.data.data;
				}
			});
			this.currentIndex = index;
			this.setCustomRule = true;
		},
		changeProp() {
			// this.$emit('changeProp', this.chooseCustomProp);
		}
	}
};
</script>

<style lang="less" scoped>
.edit-group-rules {
	.rules {
		display: flex;
		.el-input,
		.el-select {
			width: 20%;
		}
		i {
			cursor: pointer;
		}
	}
}
</style>
